<template>
    <el-form ref="form" :model="user" :rules="rules" label-width="150px">
        <el-form-item :label="$t('userInfo.old_password')" prop="oldPassword" size="small">
            <el-input v-model="user.oldPassword" :placeholder="$t('public.placeholder',{placeholder:$t('userInfo.old_password')})" type="password" show-password />
        </el-form-item>
        <el-form-item :label="$t('userInfo.new_password')" prop="newPassword" size="small">
            <el-input v-model="user.newPassword" :placeholder="$t('public.placeholder',{placeholder:$t('userInfo.new_password')})" type="password" show-password />
        </el-form-item>
        <el-form-item :label="$t('userInfo.confirm_password')" prop="confirmPassword" size="small">
            <el-input v-model="user.confirmPassword" :placeholder="$t('public.placeholder',{placeholder:$t('userInfo.confirm_password')})" type="password" show-password />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="mini" @click="submit" icon="el-icon-check">{{$t('public.submit')}}</el-button>
            <el-button type="info" plain size="mini" @click="close" icon="el-icon-close">{{$t('public.cancel')}}</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { updateUserPwd } from '@/api/system/user'

export default {
    data() {
        const equalToPassword = (rule, value, callback) => {
            if (this.user.newPassword !== value) {
                callback(new Error('两次输入的密码不一致'))
            } else {
                callback()
            }
        }
        return {
            user: {
                oldPassword: undefined,
                newPassword: undefined,
                confirmPassword: undefined,
            },
            // 表单校验
            rules: {
                oldPassword: [
                    {
                        required: true,
                        message: '旧密码不能为空',
                        trigger: 'blur',
                    },
                ],
                newPassword: [
                    {
                        required: true,
                        message: '新密码不能为空',
                        trigger: 'blur',
                    },
                    {
                        min: 6,
                        max: 20,
                        message: '长度在 6 到 20 个字符',
                        trigger: 'blur',
                    },
                    {
                        validator: (rule, value, callback) => {
                            var pwdRegex = new RegExp(
                                '(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}'
                            )
                            if (!pwdRegex.test(value)) {
                                return callback(
                                    new Error(
                                        '密码中必须包含字母、数字、特称字符!'
                                    )
                                )
                            }
                            callback()
                        },
                        trigger: 'blur',
                    },
                ],
                confirmPassword: [
                    {
                        required: true,
                        message: '确认密码不能为空',
                        trigger: 'blur',
                    },
                    {
                        validator: (rule, value, callback) => {
                            var pwdRegex = new RegExp(
                                '(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}'
                            )
                            if (!pwdRegex.test(value)) {
                                return callback(
                                    new Error(
                                        '密码中必须包含字母、数字、特称字符!'
                                    )
                                )
                            }
                            callback()
                        },
                        trigger: 'blur',
                    },
                    {
                        required: true,
                        validator: equalToPassword,
                        trigger: 'blur',
                    },
                ],
            },
        }
    },
    methods: {
        submit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    updateUserPwd(
                        this.user.oldPassword,
                        this.user.newPassword
                    ).then((response) => {
                        this.$modal.msgSuccess(this.$t('formValidation.successfullyModified'))
                    })
                }
            })
        },
        close() {
            this.$tab.closePage()
        },
    },
}
</script>
